/**
 * The Spinner user-interface component class
 * @class syslib.ui.Spinner
 * @author Gabriel Ricci
 */

syslib.ui.Spinner = __class(syslib.ui.VisualTag, 
/**
 * @lends syslib.ui.Spinner
 */
{
	id : "", 
	defaultValue : 0, 
	currentValue : 0, 
	start : 0,
	end : 0, 
	step : 1, 
	loop : false, 
	
	prepare : function(){
		// load the style
		syslib.loadStyleForComponent("spinner");

		// get the tag attributes
		var attributes = this.__attributes;

		// set the class attributes
		this.id 			= (__valid(attributes.id)) ? attributes.id : syslib.element.generateID();
		this.defaultValue 	= (__valid(attributes.defaultvalue)) ? attributes.defaultvalue : 0;
		this.start 			= (__valid(attributes.start)) ? attributes.start : 0;
		this.end 			= (__valid(attributes.end)) ? attributes.end : 0;
		this.step 			= (__valid(attributes.step)) ? attributes.step : 1;
		this.loop			= (__valid(attributes.loop) && (attributes.loop == "true" || attributes.loop === true))  ? true : false;

		// check the default value
		if(this.defaultValue < this.start){
			this.defaultValue = this.start;
		}
		if(this.defaultValue > this.end){
			this.defaultValue = this.end;
		}
		
		// set the current value;
		this.currentValue = this.defaultValue;
		
		// return 
		return true;
	},

	execute : function(){
		// create the element attributes
		var attributes = __extend(this.__attributes, {
			"type" : "text",
			"value" : this.currentValue,
			"class" : "spinner_input",
			"innerName" : "input"
		});

		// JSON STRUCTURE
		var elemtJSON = ["table", {"class" : "spinner_global_container", "border" : "0", "cellpadding" : "0", "cellspacing" : "0"},
							["tbody",
								["tr",
									["td", {"rowspan" : "2", "class" : "spinner_input_container", "innerName" : "inputContainer"},
										["input", attributes]
									],
									["td", {"valign" : "middle"},
										["div", {"class" : "spinner_buttons_container"},
											["div", {"class" : "spinner_upbutton_normal", "innerName" : "upButton"}]
										]
									]
								],
								["tr",
									["td", {"valign" : "bottom"},
										["div", {"class" : "spinner_buttons_container"},
											["div", {"class" : "spinner_downbutton_normal", "innerName" : "downButton"}]
										]
									]
								]
							]
						];

		// CREATE ELEMENT
		var spinner = this.createDOM(elemtJSON);

		// RETURN
		return spinner;
	},

	finalize : function(){
		syslib.event.listen("mouseover", this.__refs.upButton, function(){
			this.__refs.upButton.className = "spinner_upbutton_over";
		}.applyTo(this));
		syslib.event.listen("mouseout", this.__refs.upButton, function(){
			this.__refs.upButton.className = "spinner_upbutton_normal";
		}.applyTo(this));
		syslib.event.listen("mousedown", this.__refs.upButton, function(){
			this.__refs.upButton.className = "spinner_upbutton_clicked";
			this.up();
		}.applyTo(this));
		syslib.event.listen("mouseup", this.__refs.upButton, function(){
			this.__refs.upButton.className = "spinner_upbutton_over";
		}.applyTo(this));

		syslib.event.listen("mouseover", this.__refs.downButton, function(){
			this.__refs.downButton.className = "spinner_downbutton_over";
		}.applyTo(this));
		syslib.event.listen("mouseout", this.__refs.downButton, function(){
			this.__refs.downButton.className = "spinner_downbutton_normal";
		}.applyTo(this));
		syslib.event.listen("mousedown", this.__refs.downButton, function(){
			this.__refs.downButton.className = "spinner_downbutton_clicked";
			this.down();
		}.applyTo(this));
		syslib.event.listen("mouseup", this.__refs.downButton, function(){
			this.__refs.downButton.className = "spinner_downbutton_over";
		}.applyTo(this));

		if(__valid(this.__attributes.width)){
			var width = this.__attributes.width;
			this.__refs.input.style.width 			= width + "px";
			this.__refs.inputContainer.style.width	= width + "px";
		}
	},

	up : function(){
		var currvalue	= parseInt(this.currentValue);
		var workvalue	= parseInt(currvalue + parseInt(this.step));

		if(workvalue > this.end){
			if(this.loop === true){
				this.currentValue = this.start;
				this.__refs.input.value = this.currentValue;
			}
		} else {
			this.currentValue = workvalue;
			this.__refs.input.value = this.currentValue;
		}
	},

	down : function(){
		var currvalue	= parseInt(this.currentValue);
		var workvalue	= parseInt(currvalue - parseInt(this.step));

		if(workvalue < this.start){
			if(this.loop === true){
				this.currentValue = this.end;
				this.__refs.input.value = this.currentValue;
			}
		} else {
			this.currentValue = workvalue;
			this.__refs.input.value = this.currentValue;
		}
	}
});